<template>
<div class="real-behavior">
  <tab-panel class="real-behavior-tab" :tab-list="tabList">
    <div class="list-panel" slot="consume" >
      <xdh-table  :data="list"
        :columns="cols" 
        height="100%" 
        border
        size="mini"
      >
      </xdh-table>
    </div>
     <div class="list-panel" slot="peccancy" slot-scope="scope" >
      违章{{scope.tab}}
    </div>
     <div class="list-panel" slot="accident" slot-scope="scope" >
      事故{{scope.tab}}
    </div>
     <div class="list-panel" slot="insurance" slot-scope="scope" >
      保险{{scope.tab}}
    </div>
     <div class="list-panel" slot="logistics" slot-scope="scope" >
      物流{{scope.tab}}
    </div>
  </tab-panel>
</div>
</template>

<style lang="scss" scoped>
// @import '../../style/_vars.scss';
// @import '../../style/_mixin.scss';
.real-behavior{
  height: 100%;
  .real-behavior-tab{
    .list-panel{
      height: 100%;
    }
  }
}
</style>

<script>
import TabPanel from '../common/tab-panel'
import XdhTable from '@/widgets/xdh-table'
const COLUMN = [
  { type: 'index', label: '序号', fixed: 'left', width: '80' },
  { label: '主题', prop: 'theme' },
  { label: '地址', prop: 'address' },
  { label: '日期', prop: 'date' },
  { label: '数据量', prop: 'data' }
]
export default {
  name: 'RealBehavior',
  components: {
    TabPanel,
    XdhTable
  },
  props: {
  },
  data() {
    let list = []
    for (let i = 0; i < 25; i++) {
      list.push({
        theme: `主题${i}`,
        address: `广东省广州市越秀区东风中路${i + 10}号东照大厦${i + 3}楼${i}室`,
        date: `2019-01-${i}`,
        data: i
      })
    }
    return {
      tabList: [
        { label: '消费', name: 'consume' },
        { label: '违章', name: 'peccancy' },
        { label: '事故', name: 'accident' },
        { label: '保险', name: 'insurance' },
        { label: '物流', name: 'logistics' }
      ],
      cols: COLUMN,
      list: list
    }
  },
  computed: {
   
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

